<template>
  <view
    class="uni-search-box box bcl-white border"
    :class="{ border: hasBorder, 'no-icon-search': !showIconSearch }"
  >
    <!-- 搜索图标 -->
    <text class="icon icon-search" v-if="showIconSearch" @click="onsubmit()"></text>

    <view class="input box box-center box-1 bcl-white relative">
      <input
        type="text"
        placeholder="搜索关键词"
        confirm-type="search"
        :disabled="disabled"
        :focus="autoFocus"
        @confirm="submit"
        @input="onInput"
        :value="value"
      />

      <!-- 清空按钮 -->
      <text
        class="icon icon-close pointer fz-14 p-5"
        @tap="clear"
        v-if="value.length"
      ></text>
    </view>

    <!-- 扫码图标 -->
    <!-- #ifndef H5 -->
    <text
      class="icon icon-scan cl-black pointer"
      @tap.stop="scanCode"
      v-if="showIconScan"
    ></text>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "uniSearchBox",

  model: {
    prop: "value",
    event: "input"
  },
  data() {
    return {
      sodata: "",
    };
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    showIconSearch: {
      type: Boolean,
      default: true
    },
    showIconScan: {
      type: Boolean,
      default: false
    },
    hasBorder: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autoFocus: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    //查找
    onsubmit(){
      // console.log(this.sodata);
      this.$emit("onsubmit",this.sodata);
    },
    //获取输入值
    ontodata(){
      this.$emit("todata",this.sodata);
    },
    // 搜索
    submit() {
      this.$emit("search");
    },

    // 清空
    clear() {
      this.$emit("input", "");
      this.$emit("search");
    },

    // 改变输入值，由外部控制
    onInput(event) {
      let value = event.detail.value;
      this.sodata = value;
      this.ontodata();
      this.$emit("input", value);
    },

    // 扫码
    scanCode() {
      // #ifdef H5
      this.$toast("H5不支持该功能");
      return false;
      // #endif

      uni.scanCode().then(chunk => {
        let [err, res] = chunk;
        if (res) {
          console.log("扫码结果: ", res.result);
          if (res.result.indexOf("certification") > -1) {
            // #ifdef APP-PLUS
            // android 使用外部浏览器访问规避webview 不能直接调用摄像头
            if (uni.getSystemInfoSync().platform === "android") {
              plus.runtime.openURL(res.result);
            } else {
              uni.navigateTo({
                url: `/pages/webview/index?url=${res.result}`
              });
            }
            // #endif

            // #ifndef APP-PLUS
            uni.navigateTo({
              url: `/pages/webview/index?url=${res.result}`
            });
            // #endif
          } else {
            if (!this.userInfo) {
              return uni.navigateTo({
                url: "/user/login"
              });
            }

            uni.navigateTo({
              url: "/pages/index/scanLogin"
            });
          }
        }
      });
    }
  },

  computed: {
    ...mapState(["userInfo"])
  }
};
</script>

<style lang="scss">
$size: 70upx;

.uni-search-box {
  height: $size;
  border-radius: 200upx;
  padding: 0 15upx;
  overflow: hidden;

  &.no-icon-search {
    .input {
      padding-left: 20upx;
    }
  }

  .icon-search,
  .icon-scan {
    width: $size;
    height: $size;
    text-align: center;
    line-height: 70upx;
  }
}
</style>
